<!DOCTYPE html>

<html>
<head>
<!-- Oh it pains me to do this, but excanvas don't work properly unless this
is active.  Seems to be a "feature" of adding the canvas element on the fly
as opposed to having it static on the page.-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

<title>Highland Dots</title>
  <link rel="stylesheet" type="text/css" href="layout.css">

<!--[if IE]>
<script src="jslib/excanvas.js"></script>
<script language = "vbscript" src="win_loadfile.vbs"></script>

<![endif]-->

<script src="jslib/canvas.text.js"></script>
<script src="jslib/helvetiker-normal-normal.js"></script>
<script src="jslib/helvetiker-bold-normal.js"></script>
<script src="jslib/helvetiker-normal-italic.js"></script>

<script>
//window.onload = function() {primeGUI();};
</script>


</head>
<body onload="primeGUI();">

 <button onClick = 'ProcessScript("file")'>Load File (Windows)</button>   
   

<div id="toolbarlanding">&nbsp;</div>


<div class="hd_page" id="hd_page_1">
<p>
  <button onclick="testImport2()">Import and Engrave</button>
  <span id="timeinfo">Time: Not  yet rendered.</span>
  <br />
  <span>
    Note Color:    <select onChange="staff.details.noteColor1=this.options[this.selectedIndex].value;">
                     <option value="">Black</option>
                     <option value="">Red</option>
                     <option value="">Green</option>
                     <option value="">Blue</option>
                   </select>
    &nbsp; &nbsp; &nbsp; &nbsp;
    Beaming Style: <select onChange="staff.details.beamStyle=this.options[this.selectedIndex].value;">
                     <option value="straight">Straight</option>
                     <option value="sloped">Sloped</option>
                   </select>
  </span>
  &nbsp; &nbsp;
</p>


<div id="canvas_div"><p id="hdots_canvas">The music goes here</p></div>
</div> <!-- page1-->


<div class="hd_page" id="hd_page_2">
<form action="#" id="hd_config_form" onsubmit="return false;">

<div id="hd_config_plugin">
<p>When a plugin needs preferences set, that appears here.</p>
</div>


<div id="hd_config">
<p>Please setup the preferences in the list below.</p>
</div>


</form>

</div>


<script type='text/javascript' src='tools.js'></script>
<script type='text/javascript' src='mylib.js'></script>
<script type='text/javascript' src='gui.js'></script>


<script type='text/javascript' src='hdots.js'></script>

<script type='text/javascript' src='bwwimport.js'></script>

<script type='text/javascript' src='scoreelement.js'></script>
<script type='text/javascript' src='mom.js'></script>

<script type='text/javascript' src='note.js'></script>
<script type='text/javascript' src='melody.js'></script>
<script type='text/javascript' src='timesig.js'></script>
<script type='text/javascript' src='staffcontrol.js'></script>
<script type='text/javascript' src='embellishment.js'></script>
<script type='text/javascript' src='graphicelement.js'></script>
<script type='text/javascript' src='beamgroup.js'></script>
<script type='text/javascript' src='phrasegroup.js'></script>
<script type='text/javascript' src='metadata.js'></script>

<script type='text/javascript' src='imagemap.js'></script>
<script type='text/javascript' src='beautifyscore.js'></script>

<pre id="log"></pre>

<map name="hDotsMap" id="hDotsMap">
<area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html">
<area shape="rect" coords="128,132,241,179" href="http://www.trees.com/furniture.html">
<area shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html">
</map>

</body>
</html>
